<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  reqSkuList,
  reqCancelSaleSku,
  reqOnSaleSku,
  reqSkuInfo,
  deleteSku,
} from "@/api/product/sku";
import type {
  getSkuListResponseData,
  skuList,
  sku,
} from "@/api/product/sku/type";
import { ElMessage } from "element-plus";
// 分页器第几页
let pageNo = ref<number>(1);
// 分页器一页有几条数据
let pageSize = ref<number>(10);
// 分页器的数据总数
let total = ref<number>(400);
// skuList
let skuList = ref<skuList>([]);
// skuInfo
let skuInfo = ref<any>({});
// 控制el-drawer组件的显示与隐藏
let drawerShow = ref<boolean>(false);
// onMounted生命周期函数
onMounted(() => getSkuList());
// 获取skuList的函数,给一个默认参数，如果不传参就获取第一页的skuList
const getSkuList = async (pager = 1) => {
  pageNo.value = pager;
  let res: getSkuListResponseData = await reqSkuList(
    pageNo.value,
    pageSize.value
  );
  if (res.code == 200) {
    total.value = res.data.total;
    skuList.value = res.data.records;
  }
};
// el-pagination触发size-change时的回调
const handler = (value: number) => {
  getSkuList();
};
// 点击上架，下架的回调
const updateSale = async (sku: sku) => {
  if (sku.isSale == 1) {
    let res: any = await reqCancelSaleSku(sku.id as number);
    if (res.code == 200) {
      // 重新获取skuList
      getSkuList();
      ElMessage({
        type: "success",
        message: "下架商品成功",
      });
    }
  } else {
    let res: any = await reqOnSaleSku(sku.id as number);
    if (res.code == 200) {
      // 重新获取skuList
      getSkuList();
      ElMessage({
        type: "success",
        message: "上架商品成功",
      });
    }
  }
};
// 点击info按钮的回调
const showInfo = async (sku: sku) => {
  drawerShow.value = true;
  let res: any = await reqSkuInfo(sku.id as number);
  if (res.code == 200) {
    skuInfo.value = res.data;
  }
};
// 点击删除按钮的回调
const handleDelete = async (sku: sku) => {
  let res: any = await deleteSku(sku.id as number);
  if (res.code == 200) {
    getSkuList(skuList.value.length == 1 ? pageNo.value - 1 : pageNo.value);
    ElMessage({
      type: "success",
      message: "删除sku成功",
    });
  } else {
    ElMessage({
      type: "error",
      message: "系统数据,无法删除",
    });
  }
};
</script>

<template>
  <div>
    <el-card>
      <el-table :data="skuList" border style="margin: 10px 0">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="skuName"
        ></el-table-column>
        <el-table-column
          label="描述"
          align="center"
          prop="skuDesc"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="图片" align="center">
          <template v-slot="{ row }">
            <img
              v-lazy-load="row.skuDefaultImg"
              alt=""
              style="width: 100px; hright: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="重量"
          align="center"
          prop="weight"
        ></el-table-column>
        <el-table-column
          label="价格"
          align="center"
          prop="price"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              :icon="row.isSale ? 'Bottom' : 'Top'"
              type="success"
              @click="updateSale(row)"
            ></el-button>
            <el-button
              icon="InfoFilled"
              type="info"
              @click="showInfo(row)"
              v-have="`btn.Sku.detail`"
            ></el-button>
            <el-button
              icon="Delete"
              type="danger"
              @click="handleDelete(row)"
              v-have="`btn.Sku.remove`"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-model:page-size="pageSize"
        v-model:current-page="pageNo"
        :total="total"
        :page-sizes="[10, 20, 30]"
        layout="prev,pager,next,jumper,->,sizes,total"
        @current-change="getSkuList"
        @size-change="handler"
      />
    </el-card>
    <el-drawer v-model="drawerShow" title="查看商品详情">
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
          <el-tag
            v-for="item in skuInfo.skuAttrValueList"
            :key="item.id"
            style="margin: 5px"
            >{{ item.attrName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
          <el-tag
            v-for="item in skuInfo.skuSaleAttrValueList"
            :key="item.id"
            style="margin: 5px"
            >{{ item.saleAttrName }}</el-tag
          >
        </el-col>
      </el-row>
      <el-row v-if="skuInfo.skuImageList">
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
          <el-carousel
            v-if="skuInfo.skuImageList.length > 0"
            :interval="4000"
            type="card"
            height="200px"
          >
            <el-carousel-item
              v-for="item in skuInfo.skuImageList"
              :key="item.id"
            >
              <img
                :src="item.imgUrl"
                alt=""
                style="height: 100%; width: 100%"
              />
            </el-carousel-item>
          </el-carousel>
          <img
            v-else
            src="@/assets/images/empty.png"
            alt=""
            style="width: 100%; height: 100%"
          />
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
